<template>
  <div>
    <Title title="搜题" />
    <el-input placeholder="请输入题目搜题" v-model="value" autofocus>
      <el-tooltip
        class="item"
        content="文字搜索"
        placement="bottom"
        slot="append"
      >
        <el-button icon="el-icon-search" @click="search"></el-button
      ></el-tooltip>

      <el-tooltip
        class="item"
        content="识别图片"
        placement="bottom"
        slot="append"
      >
        <el-button
          icon="el-icon-folder"
          @click="$refs.input.click()"
        ></el-button>
      </el-tooltip>
    </el-input>
    <input
      ref="input"
      type="file"
      slot="append"
      @change="handleChange"
      style="visibility: hidden"
      placeholder="选择对应的图片识别"
    />
    <div class="result">
      <div class="wrap" v-if="subjects.length">
        <h2>
          搜到了 <span class="light">{{ subjects.length }}</span> 条结果
        </h2>
        <div class="list">
          <PreViewSubject
            :data="item.options"
            :options="{
              ans: item.ans,
              analysis: item.analysis,
              name: item.name,
              i,
            }"
            v-for="(item, i) in subjects"
            :key="i"
          />
        </div>
      </div>
      <el-empty v-else description="请输入题目搜索哦"></el-empty>
    </div>
  </div>
</template>

<script>
import PreViewSubject from "@/components/preview/PreviewSearchSubject";
import { search as searchWord, searchImg } from "@/api/paper";
import { warn, formatSearchData, formatWord } from "@/utils";
import Title from "@/components/common/Title";
import {mapState} from 'vuex'
import Entry from '@/components/examination/Entry.vue'
export default {
  data() {
    return {
      subjects: [],
      value: "",
    };
  },
  methods: {
    /**
     * 搜索
     */
    async search() {
      if (!this.value) return warn("请输入要搜索的题目名");
      const res = await searchWord(this.value);
      formatSearchData(res.data, this.value);
      this.subjects = res.data;
    },
    /**
     * 识别图片
     */
    async searchImgWord(w) {
      const res = await searchWord(w);
      formatSearchData(res.data, w);
      this.subjects = res.data;
    },
    /**
     * 更改
     */
    handleChange(event) {
      let reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]);
      reader.onload = async (e) => {
        let imageBase = e.target.result.slice(22);
        this.$notify.info({
          title: "消息",
          message: "识别中, 请稍后",
        });
        const res = await searchImg("image=" + encodeURIComponent(imageBase));
        // 格式化文字
        const w = formatWord(res.data.words_result);
        this.searchImgWord(w);
      };
    },
  },
  created() {
    this.fn = (e) => {
      if (e.target.tagName.toLowerCase() !== "input") return;
      if (!this.search) return;
      if (e.keyCode !== 13) return;
      this.search();
    };
    window.addEventListener("keydown", this.fn);
    if (!this.isLogin) {
      this.$router.push("/index");
    }
  },
  destroyed() {
    window.removeEventListener("keydown", this.fn);
  },
  computed: {
    ...mapState(['info', 'isLogin'])
  },
  components: {
    PreViewSubject,
    Title,
    Entry
  },
};
</script>

<style lang="scss" scoped>
.result {
  margin-top: 30px;
  background: #fff;
  padding: 20px;
  h2 {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .light {
    font-size: 20px;
    font-weight: bold;
    color: #f40;
  }
}
</style>
